<template>
  <div class="search-bar">
    <div class="search-container">
      <div class="search-input-wrapper">
        <span class="search-icon">🔍</span>
        <input
          ref="searchInput"
          v-model="searchValue"
          type="text"
          class="search-input"
          :placeholder="placeholder"
          @input="handleSearch"
          @keyup.enter="handleEnter"
          @focus="isFocused = true"
          @blur="isFocused = false"
        />
        <button
          v-if="searchValue"
          class="clear-button"
          @click="clearSearch"
          title="清除搜索"
        >
          ✕
        </button>
      </div>

      <!-- 搜索建议 -->
      <div
        v-if="showSuggestions && suggestions.length > 0"
        class="search-suggestions"
      >
        <div
          v-for="(suggestion, index) in suggestions"
          :key="index"
          class="suggestion-item"
          @click="selectSuggestion(suggestion)"
        >
          <span class="suggestion-icon">{{
            getSuggestionIcon(suggestion.type)
          }}</span>
          <span class="suggestion-text">{{ suggestion.text }}</span>
          <span class="suggestion-type">{{ suggestion.type }}</span>
        </div>
      </div>
    </div>

    <!-- 搜索统计 -->
    <div v-if="searchValue && showStats" class="search-stats">
      找到 <strong>{{ resultCount }}</strong> 个结果
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, nextTick } from "vue";
import { useCemeteryStore } from "@/stores/cemetery";

const props = defineProps({
  placeholder: {
    type: String,
    default: "搜索网站名称、描述或分类...",
  },
  showSuggestions: {
    type: Boolean,
    default: true,
  },
  showStats: {
    type: Boolean,
    default: true,
  },
  autofocus: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["search", "clear"]);

const store = useCemeteryStore();
const searchInput = ref(null);
const searchValue = ref("");
const isFocused = ref(false);

// 计算属性 - 直接计算过滤结果数量，避免循环依赖
// 使用store中的过滤逻辑和计数
const resultCount = computed(() => store.filteredSitesCount);

// 搜索建议
const suggestions = computed(() => {
  if (!searchValue.value || searchValue.value.length < 2) return [];

  const term = searchValue.value.toLowerCase();
  const suggestions = [];

  // 网站名称建议
  if (store.deadSites) {
    store.deadSites.forEach((site) => {
      if (site.name.toLowerCase().includes(term) && suggestions.length < 5) {
        suggestions.push({
          text: site.name,
          type: "网站",
          value: site.name,
        });
      }
    });
  }

  // 分类建议
  if (store.availableCategories) {
    store.availableCategories.forEach((category) => {
      if (category.toLowerCase().includes(term) && suggestions.length < 8) {
        suggestions.push({
          text: category,
          type: "分类",
          value: category,
        });
      }
    });
  }

  return suggestions;
});

// 方法
const handleSearch = () => {
  store.searchTerm = searchValue.value;
  emit("search", searchValue.value);
};

const handleEnter = () => {
  if (suggestions.value.length > 0) {
    selectSuggestion(suggestions.value[0]);
  }
};

const clearSearch = () => {
  searchValue.value = "";
  store.searchTerm = "";
  emit("clear");
  searchInput.value?.focus();
};

const selectSuggestion = (suggestion) => {
  searchValue.value = suggestion.text;
  handleSearch();
  searchInput.value?.blur();
};

const getSuggestionIcon = (type) => {
  const icons = {
    网站: "🌐",
    分类: "📂",
    应用: "📱",
    服务: "⚙️",
  };
  return icons[type] || "🔍";
};

const focusInput = () => {
  nextTick(() => {
    searchInput.value?.focus();
  });
};

// 监听搜索值变化
watch(
  () => store.searchTerm,
  (newValue) => {
    if (newValue !== searchValue.value) {
      searchValue.value = newValue;
    }
  }
);

// 自动聚焦
if (props.autofocus) {
  nextTick(() => {
    focusInput();
  });
}

// 暴露方法给父组件
defineExpose({
  focusInput,
  clearSearch,
});
</script>

<style scoped>
.search-bar {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

.search-container {
  position: relative;
  margin-top: 2rem;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: radial-gradient(
      ellipse at 20% 50%,
      rgba(255, 140, 0, 0.08) 0%,
      transparent 60%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.06) 100%
    );
  border: 2px solid rgba(255, 140, 0, 0.3);
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  transition: all 0.4s ease;
  backdrop-filter: blur(15px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.search-input-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 140, 0, 0.1) 50%,
    transparent 100%
  );
  transition: left 0.6s ease;
}

.search-input-wrapper:hover::before {
  left: 100%;
}

.search-input-wrapper:focus-within {
  border-color: rgba(255, 140, 0, 0.6);
  box-shadow: 0 0 30px rgba(255, 140, 0, 0.3), 0 4px 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  background: radial-gradient(
      ellipse at 20% 50%,
      rgba(255, 140, 0, 0.12) 0%,
      transparent 60%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.1) 100%
    );
  transform: translateY(-2px);
}

.search-icon {
  font-size: 1.2rem;
  margin-right: 0.75rem;
  opacity: 0.7;
  transition: all 0.3s ease;
  filter: drop-shadow(0 0 4px rgba(255, 140, 0, 0.3));
}

.search-input-wrapper:focus-within .search-icon {
  opacity: 1;
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(255, 140, 0, 0.5));
}

.search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

.search-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

.clear-button {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
  border: 1px solid rgba(255, 140, 0, 0.2);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.25rem;
  margin-left: 0.5rem;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  position: relative;
  overflow: hidden;
}

.clear-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle,
    rgba(255, 140, 0, 0.2) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.clear-button:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );
  color: var(--text-primary);
  border-color: rgba(255, 140, 0, 0.4);
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(255, 140, 0, 0.3);
}

.clear-button:hover::before {
  opacity: 1;
}

/* 搜索建议 */
.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: radial-gradient(
      ellipse at 30% 20%,
      rgba(139, 69, 19, 0.1) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 80%,
      rgba(75, 0, 130, 0.08) 0%,
      transparent 60%
    ),
    var(--bg-darker);
  border: 1px solid rgba(255, 140, 0, 0.3);
  border-radius: 12px;
  margin-top: 0.5rem;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 140, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(25px);
  animation: suggestionsFadeIn 0.3s ease-out;
}

@keyframes suggestionsFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.suggestion-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
}

.suggestion-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 140, 0, 0.1) 50%,
    transparent 100%
  );
  transition: left 0.4s ease;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover {
  background: linear-gradient(
    90deg,
    rgba(255, 140, 0, 0.05) 0%,
    rgba(255, 255, 255, 0.1) 100%
  );
  transform: translateX(8px);
  border-left: 3px solid rgba(255, 140, 0, 0.5);
}

.suggestion-item:hover::before {
  left: 100%;
}

.suggestion-item:hover .suggestion-icon {
  transform: scale(1.2);
  filter: drop-shadow(0 0 6px rgba(255, 140, 0, 0.4));
}

.suggestion-item:hover .suggestion-text {
  color: rgba(255, 140, 0, 0.9);
}

.suggestion-icon {
  margin-right: 0.75rem;
  font-size: 1rem;
  transition: all 0.3s ease;
  filter: drop-shadow(0 0 3px rgba(255, 140, 0, 0.2));
}

.suggestion-text {
  flex: 1;
  color: var(--text-primary);
  font-weight: 500;
  transition: color 0.3s ease;
}

.suggestion-type {
  color: var(--text-secondary);
  font-size: 0.85rem;
  background: linear-gradient(
    135deg,
    rgba(255, 140, 0, 0.15) 0%,
    rgba(255, 255, 255, 0.1) 100%
  );
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 140, 0, 0.2);
  transition: all 0.3s ease;
}

.suggestion-item:hover .suggestion-type {
  background: linear-gradient(
    135deg,
    rgba(255, 140, 0, 0.25) 0%,
    rgba(255, 255, 255, 0.15) 100%
  );
  border-color: rgba(255, 140, 0, 0.4);
  color: var(--text-primary);
}

/* 搜索统计 */
.search-stats {
  text-align: center;
  margin-top: 1rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.search-stats strong {
  color: var(--accent-color);
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-bar {
    max-width: 100%;
  }

  .search-input-wrapper {
    padding: 0.6rem 1.2rem;
  }

  .search-input {
    font-size: 0.95rem;
  }

  .search-suggestions {
    margin-top: 0.25rem;
  }

  .suggestion-item {
    padding: 0.6rem 0.8rem;
  }
}

@media (max-width: 480px) {
  .search-input-wrapper {
    padding: 0.5rem 1rem;
  }

  .search-icon {
    font-size: 1rem;
    margin-right: 0.5rem;
  }

  .search-input {
    font-size: 0.9rem;
  }

  .clear-button {
    width: 20px;
    height: 20px;
    font-size: 0.8rem;
  }
}

/* 滚动条样式 */
.search-suggestions::-webkit-scrollbar {
  width: 6px;
}

.search-suggestions::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.search-suggestions::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.search-suggestions::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
</style>
